<style lang="scss" scoped>
  @import './index.scss';
  .p-wrap{
    position: relative;
    background: #fff;
    border-radius: 6px;
    width: 360px; height: 240px;
  }

  .p-title{
    width: 100%; height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
  }

  .p-input{
    display: block;
    margin: 40px auto;
    width: 80%; height: 40px;
    outline: none;
    border: 1px solid #eaeaea;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .p-btn-box{
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0; bottom: 0;
  &>.cancel-btn{
      width: 80px; height: 40px;
      position: absolute;
      left: 60px; top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
    }
  &>.confirm-btn{
      width: 80px; height: 40px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 60px;
      font-size: 15px;
    }
  }
  .none-display{
    padding-top: 200px;
    font-size: 22px;
  }
</style>

<template>
  <div v-if="detail.id">
    <div class="c-head">
      <div class="username">{{detail.name}}</div>
      <yd-button class="pay-btn" bgcolor="#0076FF" color="#fff" @click.native="showBuy = true">续费</yd-button>
      <yd-button class="delete-btn" bgcolor="#FF523E" color="#fff" @click.native="deleteFu">删除</yd-button>
    </div>

    <div class="c-body">
      <div class="c-item" v-if="1">
        <div class="c-text">使用中状态</div>
        <yd-button
          v-if="detailInfo.mstate === 'disable'"
          class="forbid-btn"
          type="hollow"
          color="#303641"
          style="border:1px solid rgba(151,151,151,1);"
          @click.native="forbidFu(true)">上架</yd-button>
        <yd-button
          v-else
          class="forbid-btn"
          type="hollow"
          color="#303641"
          style="border:1px solid rgba(151,151,151,1);"
          @click.native="forbidFu(false)">下架</yd-button>
      </div>

      <div class="c-item" v-else>
        <div class="c-text red">过期，付费使用</div>
      </div>

      <x-item label="使用期限至：" text="暂无时限设置"></x-item>
      <x-item :label="'卡纸ID号：' + detail.id" text="共0个我的客户使用0次"></x-item>

      <div class="c-item-block">
        <div class="c-block-center" :style="{backgroundColor: info != null ? info.customcolor : 'white'}">
          <img :src="info.imgurl" class="c-item-img-1">
          <!--<img :src="info.czjmt" class="c-item-img-2">-->
          <!--<img :src="info.sa" class="c-item-img-3">-->
        </div>
      </div>
      <x-item label="名称" :text="detail.name"></x-item>
      <x-item label="自定义名称" :text="detailInfo.mnick" havechange="修改" green @click.native="change"></x-item>
      <x-item label="厚（cm）" :text="info.height"></x-item>
      <x-item label="卡纸色值" :text="info.customcolor"></x-item>

      <div class="regist-message">
        <div>所属厂家信息</div>
      </div>
      <x-item :label="detail.factoryname ?  detail.factoryname : '暂无厂家信息'" :text="detail.factory"></x-item>
      <x-item label="loralisa洛卡丽萨(暂无大类)" :text="detail.seqnumber"></x-item>

    </div>

    <yd-popup v-model="show" position="center" :close-on-masker="false">
      <div class="p-wrap">
        <div class="p-title">修改名称</div>
        <input type="text" class="p-input" v-model="content">
        <div class="p-btn-box">
          <yd-button type="hollow" class="cancel-btn" @click.native="show = false">取消</yd-button>
          <yd-button type="primary" class="confirm-btn" @click.native="confirm">确定</yd-button>
        </div>
      </div>
    </yd-popup>

    <!-- 购买弹框 -->
    <x-pop-wrap v-if="showBuy">

      <!-- 购买前 -->
      <div class="box" slot="box" v-if="1">
        <yd-icon name="error" class="close" color="#9B9B9B" size="15px" @click.native="showBuy = false"></yd-icon>
        <div class="head">1个卡纸使用续费</div>
        <div class="qr-code"></div>
        <div class="price">¥950/年</div>
        <div class="type">使用微信扫码购买</div>
        <div class="bottom" style="bottom: 0;">购买标示默认同意“虚拟服务，不退款”条款</div>
      </div>

      <!-- 购买成功 -->
      <div class="box" slot="box" v-else>
        <yd-icon name="error" class="close" color="#FE3824" size="15px" @click.native="showBuy = false"></yd-icon>
        <div class="success"></div>
        <div class="success-text">完成支付，购买成功</div>
        <div class="award">恭喜，已获得微代理员（10个）</div>
        <div class="bottom green-18">前往管理后台</div>
        <div class="buyshop green-18" @click="showBuy=false">继续购买</div>
      </div>

    </x-pop-wrap>
  </div>
  <div v-else  class="none-display">暂无此类素材信息</div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        content: '',
        show: false,
        changeType: '',
        oswitch: false,
        showBuy: ''
      }
    },

    watch:{
      detailTemp: {
        imediate: true,
        handler: function(newValue){
          this.detialTemp = newValue
          this.refresh()
        }
      }
    },
    computed:{
      ...mapState({
        detailInCard: state => state.material.detailInCard
      }),
      info () {
        try{
          let info =  JSON.parse(this.detailInfo.data.info)
          return info
        }catch (e){
          return {}
        }
      },
      detail (){
        if (this.detailInfo.data){
          return this.detailInfo.data
        }else{
          return {}
        }
      },
      detailInfo(){
        return this.detailInCard || {}
      },
      detailTemp() {
        return this.$route.query.info || {}
      }
    },

    mounted(){

    },
    methods: {
      ...mapActions([
        'updateMaterial',
        'getMaterialDetail'
      ]),
      refresh(){
        if(!this.detialTemp.mid){
          return
        }
        let params = {
          action: 'getmaterial',
          userid: this.detialTemp.userid,
          subid: this.detialTemp.subid,
          mtype: this.detialTemp.mtype,
          mid: this.detialTemp.mid
        }
        this.getMaterialDetail(params)
      },
      deleteFu () {
        this.$xalert.open({
          title: '确定要移除卡纸“' + this.detail.name + '”吗？',
          btnText: '确定移除',
          btnColor: '#FF523E',
          success: () => {
          this.$xalert.close()
          let paramsDelete = {
            action: 'update',
            mtype: this.detailInfo.mtype,
            subaction:'delete',
            mid:this.detail.id,
            userid: localStorage.getItem('userid'),
            subid: localStorage.getItem('userid'),

          }
          this.updateMaterial(paramsDelete)
            .then (data => {
            this.$dialog.toast({
              mes: '已移除',
              timeout: 1500,
              icon: 'success',
              callback: () => {

            }
          });
          })
        }
      })
      },
      forbidFu (up) {
        let temp = up == true ? '上架' : '下架'
        let name = this.detail.name
        let stateTemp = up == true ? 'enable' : 'disable'
        this.$xalert.open({
          title: '确定要' + temp + '卡纸“' + name +'”吗？',
          btnText: temp,
          btnColor: '#303641',
          success: () => {
          this.$xalert.close()
          let paramsDelete = {
            action: 'update',
            mtype: this.detailInfo.mtype,
            subaction:'update',
            mid:this.detail.id,
            userid: localStorage.getItem('userid'),
            subid: localStorage.getItem('userid'),
            mstate: stateTemp

          }
          this.updateMaterial(paramsDelete)
            .then (data => {
              this.refresh()
              this.$store.state.needRefreshInCard += 1
              this.$store.state.needRefreshInfo += 1

              this.$dialog.toast({
              mes: '修改成功，请刷新页面',
              timeout: 1500,
              icon: 'success',
              callback: () => {

            }
          });
          })
        }
      })
      },
      change () {
        this.show = true
      },
      confirm () {
        this.show = false
        let paramsDe = {
          action: 'update',
          mtype: this.detailInfo.mtype,
          subaction:'update',
          mid:this.detail.id,
          userid: localStorage.getItem('userid'),
          subid: localStorage.getItem('userid'),
          mnick: this.content

        }
        this.updateMaterial(paramsDe)
          .then (data => {
            this.refresh()
            this.$dialog.toast({
              mes: '修改成功',
              timeout: 1500,
              icon: 'success',
              callback: () => {
              }
            });
          })
      }
    }
  }
</script>
